<script setup>
import {ref} from 'vue'

const text = ref('')
const flag = ref(false)
const user = ref('李四')
const age = ref(18)
const addr = ref('北京')
const tt = ref('hello info')

function save() {
  console.log(user.value)
  console.log(age.value)
  console.log(addr.value)
}

const addrs = ref(['郑州', '北京', '上海', '天津', '重庆', '开封'])
</script>
<template>


  <h3>ms:{{tt}}</h3>
  <textarea v-model="tt">
    hello
  </textarea>
  <p>user:{{ user }}</p>
  <label><input type="text" v-model="user" placeholder="用户"></label>
  <label><input type="text" v-model="age" placeholder="年龄"></label>
  <label>地址：
    <select v-model="addr">
      <option v-for="addr in addrs" :value="addr">{{ addr }}</option>
    </select>
  </label>
  <button @click="save">保存</button>

  <hr>
  <p>message:{{ text }}</p>

  <!-- :value="" :class :id :style  -->
  <input
      :value="text"
      :type="flag ? 'text':'password'"
      @input="event => text = event.target.value">
  <button @click="flag=!flag">{{ flag ? '不显示' : '显示' }}</button>
</template>

<style>
p {
  font-size: 16px;
}
</style>
